<div class="DashboardGraphs">
    <div class="DashboardGraphs-headerSection">
        <h3 class="DashboardGraphs-headerText">
            <translate>JOB STATUS</translate>
        </h3>
        <div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected">
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>Period</div>
                <div class="DashboardGraphs-periodDropdown">
                    <a id="period-dropdown" role="button"
                    data-toggle="dropdown"
                    data-target="#"
                    href="/page.html"
                    class="DashboardGraphs-filterDropdownText">
                        <span id="period-dropdown-display">
                            <span translate>Past Month</span>
                            <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                        </span>
                    </a>
                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
                        <li>
                            <a class="n" id="day" translate>Past 24 Hours </a>
                        </li>
                        <li>
                            <a class="n" id="week" translate>Past Week</a>
                        </li>
                        <li>
                            <a class="n" id="month" translate>Past Month</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>Job Type</div>
                <div class="DashboardGraphs-jobTypeDropdown">

                        <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText"
                        href="/page.html">
                            <span id="type-dropdown-display">
                                <span translate>All</span>
                                <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                            </span>
                        </a>

                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--jobType" role="menu" aria-labelledby="type-dropdown">
                        <li>
                            <a class="m" id="all" translate>All</a>
                        </li>
                        <li>
                            <a class="m" id="inv_sync" translate>Inventory Sync</a>
                        </li>
                        <li>
                            <a class="m" id="scm_update" translate>SCM Update</a>
                        </li>
                        <li>
                            <a class="m" id="playbook_run" translate>Playbook Run</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>View</div>
                <div class="DashboardGraphs-statusDropdown">
                    <a id="status-dropdown" role="button"
                    data-toggle="dropdown"
                    data-target="#"
                    href="/page.html"
                    class="DashboardGraphs-filterDropdownText">
                        <span id="status-dropdown-display">
                            <span translate>All</span>
                            <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                        </span>
                    </a>

                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--status" role="menu" aria-labelledby="status-dropdown">
                        <li>
                            <a class="o" id="both" translate>All</a>
                        </li>
                        <li>
                            <a class="o" id="failed" translate>Successful</a>
                        </li>
                        <li>
                            <a class="o" id="successful" translate>Failed</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="DashboardGraphs-graphSection">
        <div class="DashboardGraphs-graphContainer" auto-size-module
            graph-type="jobsStatus"
            ng-class="{'is-selected': jobStatusSelected }">
            <job-status-graph 
                class="DashboardGraphs-graph DashboardGraphs-graph--jobStatusGraph"
                data="graphData.jobStatus"
                period="graphData.period"
                job-type="graphData.jobType"
                status="graphData.status">
            </job-status-graph>
        </div>
    </div>
</div>
